<template>
  <div class="conlist">
      <div class="top">
        <ul>
            <li>全部</li>
            <li>演唱会</li>
            <li>话剧歌剧</li>
            <li>音乐会</li>
            <li>曲苑杂坛</li>
            <li>舞蹈芭蕾</li>
            <li>体育比赛</li>
            <li>儿童亲子</li>
            <li>儿童亲子</li>
            <li>儿童亲子</li>
        </ul>
      </div>
      <div class="city">
          <ul>
              <li>
                  <p>西安</p>
                  <span class="iconfont icon-xiajiantou"></span>
              </li>
              <li>
                  <p>全部时间</p>
                  <span class="iconfont icon-xiajiantou"></span>
              </li>
              <li>
                  <p>推荐排序</p>
                  <span class="iconfont icon-xiajiantou"></span>
              </li>
              <li>
                  <p>距离最近</p>
                  <span class="iconfont icon-xiajiantou"></span>
              </li>
              
          </ul>
      </div>
      <div class="lists" v-for="(v,i) in this.$store.state.data.arr" :key="i" @click="fun(v.title)">
          <div class="left">
              <img :src=v.img>
          </div>
          <div class="right">
              <h5> {{v.title}}</h5>
              <p> {{v.time}}</p>
              <p>{{v.city}}</p>
              <h4>{{v.price}} <span>起</span> </h4>
          </div>
      </div>
  </div>
</template>

<script>
 
export default {
   data() {
       return {
           listarr:[]
       }
   },
   created() {
       this.$store.dispatch("demolink")   //触发vuex的事件
   },
   methods: {
         fun(title){
       this.$router.push({name:'Xq',query:{newtitle:title}}) 
      
    
  
   }
    
  
}
}
</script>

<style scoped>
.conlist .top{
    width: 100%;
    height: 0.5rem;
    font-size: 0.2rem;
    /* background-color:skyblue; */
}
.conlist .top ul{
    width: 100%;
    height: 0.5rem;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    align-items: center;
    white-space: nowrap
   

}
.conlist .top ul li{
    list-style: none;
    text-align: center;
    margin-right: 0.05rem;
    width: 25%;
    font-size: 0.16rem;
    
}
.conlist .city{
    width: 100%;
    height: 0.5rem;
    /* background-color: pink; */
    font-size: 0.15rem;
}
.conlist .city ul{
    width: 100%;
    height: 0.5rem;
   display: flex;
   align-items: center;
}
.conlist .city ul li{
    width: 25%;
    list-style: none;
}
.conlist .city ul li p{
    display: inline-block;
}
.conlist .lists{
     width: 100%;
     height: 1.5rem;
     display: flex;
     /* background-color: pink; */
     margin-bottom: 0.2rem;
}
.conlist .lists .left{
    width:25%;
    height: 1.5rem;
    margin-left: 0.2rem;
    background-color:skyblue;
}
.conlist .lists .left img{
    width:100%;
    height: 1.5rem;
}
.conlist .lists .right{
    width: 70%;
    height: 1.5rem;
    font-size: 0.2rem;
    margin-left: 0.1rem;
}
.conlist .lists .right h5{
    width: 100%;
    height: 0.6rem;
    /* line-height: 0.4rem; */
    /* overflow: hidden; */
    font-weight: normal;
    /* display: -webkit-box;
    -ms-word-break: break-all;
    -webkit-line-clamp: 2;
    white-space: nowrap; */
    /* text-overflow: ellipsis; */
}
.conlist .lists .right p{
    margin-top: 0.02rem;
    color: gray;
    font-size: 0.15rem;
}
.conlist .lists .right h4{
    margin-top: 0.2rem;
    font-weight: normal;
    color: hotpink;
}
.conlist .lists .right h4 span{
    color: black;
    font-size: 0.15rem;
}
</style>